<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>01元素内容操作</title>
        <!-- 01元素内容操作：元素以及元素内容的部分
            .html()         无参---功能：获取匹配元素中第一元素的内容
                            有参---功能：将匹配元素集合中所有元素替换为新元素
            .val()          无参---功能：表单内元素：input、select生效
                                        获取表单元素中第一元素的内容
                                        
                            有参---功能：表单内元素：input、select生效
                                   input元素直接显示 value
                                    select元素不是直接显示 value
                                    option 元素中内容：用户显示
                                    option 元素中value值，
                                    必须当前select中，option元素value值
                                    直接赋值：打印select元素对象名称[object Object]
            特点：针对   （表单内form元素可以包裹） 元素的内容
            .text()                 无参---功能：获取匹配元素集合中所有元素的文本内容
                                    有参---功能：【设置】匹配元素集合中所有元素的文本内容替换
            特点：元素中存在内容
         -->
         <script src="../js/jquery-1.11.1.js"></script>
    </head>
    <body>
        <h1>html()函数使用</h1>
        <button>按钮-针对html()函数-有参</button>
        <span>lorem1</span>
        <span>lorem2</span>
        <h1>val()函数使用</h1>
        <button>按钮-针对val()函数无参</button>
        <input type="text" value="文本框真实的数据"/>
        <input type="text" placeholder="输入框显示效果[提示]"/>
        <!-- html：按钮 | 下拉列表 select>option*3 需要加value -->
        <!-- jq： 点击按钮，设置下拉列表的值  | html()与val()有参是否存在区别 -->
        <button>按钮-针对val()函数-有参</button>
        <select>
            <option value="rem1">lorem1</option>
            <option value="rem2">lorem2</option>
            <option value="rem3">lorem3</option>
        </select>
        <h1>text()函数使用</h1>
        <button class="btn1">按钮-针对text()函数-无参</button>
        <button class="btn2">按钮-针对text()函数-有参</button>
        <p>lorem4</p>
        <p>lorem5</p>
        <p>lorem6</p>
        
        <script>
            // 1.找到 类名为 btn1 的按钮--点击---弹窗内容 三个 p元素内容
            // 2.找到 类名为 btn2 的按钮--点击---lorem4/5/6 改成 "修改文本"【有参】
            $(".btn1").click(function(){
                var ptext=$("p").text();
                alert(ptext);
            });
            $(".btn2").click(function(){
                $("p").text("修改文本");
            });
            
            // $("button").click(function(){
            //      设置元素的第一个值    1.直接设置下拉列表value的值
            //      $("select").val("rem1");
            //       设置元素第一个的值   2.给第一个值添加，设置的内容【本身存在】
            //      var rem=$("select").val();
                 
            //       [object Object] JavaScript中 对象的默认字符串表示形态
            //      select元素 对象 输出[object Object]
                 
            //      value的值：真实数据 option中值：显示数据
            //      object Object    测试：无参
            //      alert("val()函数有参"+rem);
            // });
            
            
            //动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
            // $("button").click(function(){
            //     注意：js变量名不可以为关键字！     in是关键字
            //     var ins=$("input").val();
            //     alert("val()函数无参："+ins)
            // });
            
            
            // 有参：点击按钮--下面两个span    改成 lorem、lorem
            // $("button")click(function(){
            //     $("span").html("<span>lorem</span>");
            // });
            
            
            // js变量【int i=1】==jq变量  var 变量名=值、元素
            // 无参数      html() 函数使用
            // var html=$("span").html();
            // BOM方式 打印数据
            // alert("无参数获取第一个元素内容："+html)
        </script>
    </body>
</html>